<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in cardList" :key="index">
        <el-card class="box-card">
          <template #header>
            <div class="clearfix">
              <span>{{ item.title }}</span>
              <el-tag type="success" style="float: right; margin-top: 2px">{{ item.percent }}%</el-tag>
            </div>
          </template>
          <div class="text item">
            <div class="value">{{ item.value }}</div>
            <div class="info">
              <span class="increase" :class="item.increase ? 'up' : 'down'">
                <i class="el-icon-arrow-up"></i>{{ item.increase ? '上升' : '下降' }}{{ item.change }}%
              </span>
              <span class="time">较上周</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="16">
        <el-card class="box-card">
          <template #header>
            <div class="clearfix">
              <span>趋势分析</span>
              <el-radio-group v-model="chartType" size="small" style="float: right">
                <el-radio-button value="day">日</el-radio-button>
                <el-radio-button value="week">周</el-radio-button>
                <el-radio-button value="month">月</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container">
            <canvas ref="trendChart" width="400" height="200"></canvas>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="clearfix">
              <span>访问来源</span>
            </div>
          </template>
          <div class="chart-container">
            <canvas ref="sourceChart" width="300" height="200"></canvas>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="24">
        <el-card class="box-card">
          <template #header>
            <div class="clearfix">
              <span>最近操作记录</span>
              <el-button style="float: right; padding: 3px 0" link>查看全部</el-button>
            </div>
          </template>
          <el-table :data="logs" stripe style="width: 100%">
            <el-table-column prop="username" label="用户"></el-table-column>
            <el-table-column prop="operation" label="操作"></el-table-column>
            <el-table-column prop="date" label="时间"></el-table-column>
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="scope.row.status === '成功' ? 'success' : 'danger'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, watch } from 'vue'
import Chart from 'chart.js/auto'

const chartType = ref('day')
const trendChart = ref(null)
const sourceChart = ref(null)
let trendChartInstance = null
let sourceChartInstance = null

const cardList = reactive([
  { title: '访问量', value: '1,289', percent: '18.3', increase: true, change: '3.2' },
  { title: '订单数', value: '863', percent: '12.5', increase: true, change: '5.7' },
  { title: '销售额', value: '¥28,642', percent: '22.8', increase: true, change: '2.1' },
  { title: '新用户', value: '356', percent: '9.2', increase: false, change: '1.5' }
])

const logs = reactive([
  { username: '张三', operation: '创建订单', date: '2023-06-10 10:24', status: '成功' },
  { username: '李四', operation: '修改用户信息', date: '2023-06-10 09:15', status: '成功' },
  { username: '王五', operation: '删除产品', date: '2023-06-10 08:42', status: '失败' },
  { username: '赵六', operation: '提交报销', date: '2023-06-09 18:30', status: '成功' },
  { username: '钱七', operation: '申请休假', date: '2023-06-09 16:45', status: '成功' }
])

const getChartData = (type) => {
  let labels, data1, data2

  if (type === 'day') {
    labels = ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
    data1 = [65, 59, 80, 81, 56, 55]
    data2 = [28, 48, 40, 19, 86, 27]
  } else if (type === 'week') {
    labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    data1 = [65, 59, 80, 81, 56, 55, 40]
    data2 = [28, 48, 40, 19, 86, 27, 90]
  } else {
    labels = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    data1 = [65, 59, 80, 81, 56, 55, 40, 65, 59, 80, 81, 56]
    data2 = [28, 48, 40, 19, 86, 27, 90, 28, 48, 40, 19, 86]
  }

  return { labels, data1, data2 }
}

const initCharts = () => {
  const { labels, data1, data2 } = getChartData(chartType.value)

  // 趋势图
  trendChartInstance = new Chart(trendChart.value, {
    type: 'line',
    data: {
      labels: labels,
      datasets: [
        {
          label: '访问量',
          data: data1,
          borderColor: '#409EFF',
          backgroundColor: 'rgba(64, 158, 255, 0.1)',
          tension: 0.3,
          fill: true
        },
        {
          label: '订单数',
          data: data2,
          borderColor: '#67C23A',
          backgroundColor: 'rgba(103, 194, 58, 0.1)',
          tension: 0.3,
          fill: true
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: 'top',
        }
      },
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  })

  // 来源图
  sourceChartInstance = new Chart(sourceChart.value, {
    type: 'doughnut',
    data: {
      labels: ['直接访问', '搜索引擎', '社交媒体', '广告投放'],
      datasets: [{
        data: [35, 30, 20, 15],
        backgroundColor: [
          '#409EFF',
          '#67C23A',
          '#E6A23C',
          '#F56C6C'
        ],
        borderWidth: 0
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: 'bottom',
        }
      },
      cutout: '70%'
    }
  })
}

const updateTrendChart = () => {
  const { labels, data1, data2 } = getChartData(chartType.value)

  trendChartInstance.data.labels = labels
  trendChartInstance.data.datasets[0].data = data1
  trendChartInstance.data.datasets[1].data = data2
  trendChartInstance.update()
}

onMounted(() => {
  initCharts()
})

watch(chartType, () => {
  updateTrendChart()
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.box-card {
  height: 100%;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.value {
  font-size: 28px;
  font-weight: bold;
  margin: 10px 0;
}

.info {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #909399;
}

.increase {
  margin-right: 10px;
}

.up {
  color: #F56C6C;
}

.down {
  color: #67C23A;
}

.chart-container {
  width: 100%;
  height: 100%;
  min-height: 200px;
}
</style>
